MVVM in .NET MAUI with CommunityToolkit.Mvvm

Writing all your logic in the code‑behind (the .xaml.cs file) quickly becomes messy and hard to test. The MVVM (Model‑View‑ViewModel) pattern fixes this by separating your UI from your logic. In this tutorial you will learn MVVM in .NET MAUI the modern way using CommunityToolkit.Mvvm, which removes almost all the boilerplate with source generators.

Why CommunityToolkit.Mvvm?

Traditionally you had to implement INotifyPropertyChanged, write full properties with backing fields, and create ICommand objects by hand. The toolkit generates all of that for you from simple attributes, so your view model stays tiny and readable.

Step 1 – Install the package

dotnet add package CommunityToolkit.Mvvm

Step 2 – Create the ViewModel

Two things are important: the class must be partial (so the generator can add code to it) and it should inherit from ObservableObject.

using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;

namespace MauiMvvmDemo.ViewModels;

public partial class MainViewModel : ObservableObject
{
    // Generates a public "Name" property with change notification
    [ObservableProperty]
    private string name = string.Empty;

    [ObservableProperty]
    private string greeting = string.Empty;

    // Generates a "GreetCommand" you can bind to a Button
    [RelayCommand]
    private void Greet()
    {
        Greeting = $"Hello, {Name}! Welcome to .NET MAUI MVVM.";
    }

    // Async commands are just as easy
    [RelayCommand]
    private async Task LoadAsync()
    {
        await Task.Delay(500); // simulate loading data
        Greeting = "Data loaded successfully.";
    }
}

How the magic works: the field name generates a property called Name, and the method Greet() generates a command called GreetCommand. Always bind to the generated PascalCase names.

Step 3 – Bind the View (XAML)

Set x:DataType for compiled bindings (faster and safer), then bind controls to the properties and commands.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:vm="clr-namespace:MauiMvvmDemo.ViewModels"
             x:Class="MauiMvvmDemo.MainPage"
             x:DataType="vm:MainViewModel">

    <VerticalStackLayout Padding="20" Spacing="15">

        <Entry Placeholder="Enter your name"
               Text="{Binding Name}" />

        <Button Text="Greet"
                Command="{Binding GreetCommand}" />

        <Label Text="{Binding Greeting}"
               FontSize="18" />

    </VerticalStackLayout>
</ContentPage>

Step 4 – Connect the ViewModel with Dependency Injection

Register the page and the view model in MauiProgram.cs:

builder.Services.AddTransient<MainViewModel>();
builder.Services.AddTransient<MainPage>();

Then inject the view model into the page and set it as the BindingContext:

public partial class MainPage : ContentPage
{
    public MainPage(MainViewModel viewModel)
    {
        InitializeComponent();
        BindingContext = viewModel;
    }
}

Bonus – Enable/disable a button automatically

You can tell a command when it is allowed to run. The button is disabled automatically when the condition is false.

[RelayCommand(CanExecute = nameof(CanGreet))]
private void Greet() => Greeting = $"Hi {Name}!";

private bool CanGreet() => !string.IsNullOrWhiteSpace(Name);

// Re-check CanGreet whenever Name changes
[ObservableProperty]
[NotifyCanExecuteChangedFor(nameof(GreetCommand))]
private string name = string.Empty;

Conclusion

With CommunityToolkit.Mvvm you get clean, testable view models with almost no boilerplate. This is the recommended way to build .NET MAUI apps today.

Want to load real data into your view model? Check out “Consuming a REST API with HttpClient in .NET MAUI” and “Local SQLite Database in .NET MAUI”.